<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
    <p v-color="'pink'">color</p>
    <p v-content>{{value}}</p>
    <p v-red>red</p>
    <p v-test:value="'123'">123</p>
</div>
</body>
<script>
    //指令特点：
    // 1- 以v-开头
    // 2- 指令的组成：v-指令的名字:参数.修饰符=值
    //              v-name:arg.modifier=value
    //    有值：v-text v-html v-if v-else-if v-show
    //    无值: v-pre v-once v-cloak
    //    有修饰符:v-model.number .lazy .trim  v-on:click.native
    //    有参数:v-bind v-on
    // 3- 指令的目的：操作DOM元素
    // 4- 自定义指令可以通过关键词directives,值是一个对象，对象的属性名即是指令的名字，属性的值可以是函数也可以是对象。
    // 5- 自定义的指令会在beforeMount之后，mounted之前执行。
    new Vue({
        el : '#root',
        data:{
            value : 'sxx'
        },
        directives : {
            color(el,binds){
                el.style.color = binds.value;
            },
            content(el){
                el.innerText = '+' + el.innerText;
            },
            red(el){
                el.style.color ='red';
            },
            test(el,binds){
                console.log(binds)
            }
        }
    })
</script>
</html>